import {Avatar, Card, Descriptions, Image, Modal, Tabs, Tag} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {UserManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";

const WorkDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [record, setRecord] = useState<any>(undefined)
  const [currentRow, setCurrentRow] = useState<any>();
  const [preview, setPreview] = useState<boolean>(false)
  const queryRecordDetail = (userId: number) => {
    if (userId) {
      UserManager.userDetail(userId).then(({code, data}) => {
        if (isSuccess(code)) {
          setRecord(data)
        }
      })
    }
  }

  useEffect(() => {
    queryRecordDetail(id)
  }, [id])

  return (
    <PageContainer>
      <Modal visible={preview} onCancel={() => {
        setPreview(false);
        setCurrentRow(undefined)
      }}>
        <Image src={currentRow?.backgroundUrl}/>
      </Modal>
      <Card bordered={false}>
        <Tabs destroyInactiveTabPane={true}>
          <Tabs.TabPane forceRender tab='基本信息' key="WORK_BASIC_INFO">
            <Descriptions title="基本信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="用户ID">{id}</Descriptions.Item>
              <Descriptions.Item label="昵称">{record?.nickName}</Descriptions.Item>
              <Descriptions.Item label="头像">{record?.avatarUrl ?
                <Avatar src={record?.avatarUrl}/> : '-'}</Descriptions.Item>
              <Descriptions.Item label="手机号">{record?.phone}</Descriptions.Item>
              <Descriptions.Item label="性别"
                                 span={16}>{record?.gender ? SYS_ENUMS.SEX[record?.gender]?.label : '-'}</Descriptions.Item>
              <Descriptions.Item
                label="地区">{record?.regionName ? record?.regionName : '-'}{record?.profession ? record?.profession : ''}</Descriptions.Item>
              <Descriptions.Item label="职业">{record?.profession ? record?.profession : '-'}</Descriptions.Item>
              <Descriptions.Item label="生日">{record?.birth ? record?.birth : '-'}</Descriptions.Item>
              <Descriptions.Item span={24} label="主页背景">{record?.backgroundUrl ? <a onClick={()=>{
                setCurrentRow(record)
                setPreview(true)
              }}>查看</a> : '-'}</Descriptions.Item>
              <Descriptions.Item span={24}
                                 label="个人简介">{record?.personalProfile ? record?.personalProfile : '-'}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="账号信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="账号等级">LV{record?.level} <Tag color='blue'>{record?.levelDesc}</Tag></Descriptions.Item>
              <Descriptions.Item label="成长经验值">{record?.experienceNum}</Descriptions.Item>
              <Descriptions.Item label="是否开通会员">{record?.izMembers?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="会员种类">{record?.membersType}</Descriptions.Item>
              <Descriptions.Item label="到期时间">{record?.membersMaturity}</Descriptions.Item>
              <Descriptions.Item label="累计收益">{record?.accumulateIncome}</Descriptions.Item>
              <Descriptions.Item label="帐号余额">{record?.balance}</Descriptions.Item>
              <Descriptions.Item label="已提现余额">{record?.wasCash}</Descriptions.Item>
              <Descriptions.Item label="是否为定制设计师">{record?.izCustomize?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="定制设计师等级">{SYS_ENUMS.LEVEL[record?.customizeLevel]??'-'}</Descriptions.Item>
              <Descriptions.Item label="是否为创作设计师">{record?.izCreate?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="创作设计师类型">
                {
                  record?.createType?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag}`)
                }
              </Descriptions.Item>
              <Descriptions.Item label="账号状态">{record?.enabling?'启用中':'已禁用'}</Descriptions.Item>
              <Descriptions.Item label="上次登录">{record?.lastLogin}</Descriptions.Item>
              <Descriptions.Item label="注册时间">{record?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="账号绑定" style={{marginBottom: 32}}>
              <Descriptions.Item label="手机号">{record?.phone}</Descriptions.Item>
              <Descriptions.Item label="邮箱">{record?.mail}</Descriptions.Item>
              <Descriptions.Item label="微信">{record?.weChatAccount}</Descriptions.Item>
              <Descriptions.Item label="QQ">{record?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="微博">{record?.shareNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="实名信息" style={{marginBottom: 32}}>
              <Descriptions.Item label="是否实名认证">{record?.verified?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="是否银行卡认证" span={8}>{record?.bankCardVerified?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="真实姓名">{record?.realName}</Descriptions.Item>
              <Descriptions.Item label="开户行">{record?.bankOpen}</Descriptions.Item>
              <Descriptions.Item label="预留手机号">{record?.bankPhone}</Descriptions.Item>
              <Descriptions.Item label="银行卡号">{record?.bankCard}</Descriptions.Item>
              <Descriptions.Item label="支付宝">{record?.aliPayAccount}</Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='其他信息' key="WORK_AUDIT_LOG">
            <Descriptions title="交易详情" style={{marginBottom: 32}}>
              <Descriptions.Item label="交易金额"><span style={{color:'red'}}>{record?.tradeAmount}</span></Descriptions.Item>
              <Descriptions.Item label="订单总数">{record?.orderNum}</Descriptions.Item>
              <Descriptions.Item label="成交订单数">{record?.orderFinishNum}</Descriptions.Item>
              <Descriptions.Item label="未成交订单数">{record?.orderFailNum}</Descriptions.Item>
              <Descriptions.Item label="退款订单">{record?.orderRefundNum}</Descriptions.Item>
              <Descriptions.Item label="退款金额"><span style={{color:'red'}}>{record?.refundAmount}</span></Descriptions.Item>
              <Descriptions.Item label="需求订单">{record?.demandOrderNum}</Descriptions.Item>
              <Descriptions.Item label="服务订单">{record?.serverOrderNum}</Descriptions.Item>
              <Descriptions.Item label="资源订单">{record?.resourcesOrderNum}</Descriptions.Item>
              <Descriptions.Item label="课程订单">{record?.courseOrderNum}</Descriptions.Item>
              <Descriptions.Item label="系统订单">{record?.systemOrderNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="发布统计" style={{marginBottom: 32}}>
              <Descriptions.Item label="资源数量">{record?.resourcesNum}</Descriptions.Item>
              <Descriptions.Item label="作品数量">{record?.worksNum}</Descriptions.Item>
              <Descriptions.Item label="文章数量">{record?.articleNum}</Descriptions.Item>
              <Descriptions.Item label="动态数量">{record?.dynamicNum}</Descriptions.Item>
              <Descriptions.Item label="案例数量">{record?.casesNum}</Descriptions.Item>
              <Descriptions.Item label="需求数量">{record?.demandNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="创作数据" style={{marginBottom: 32}}>
              <Descriptions.Item label="人气">{record?.popularityNum}</Descriptions.Item>
              <Descriptions.Item label="获赞">{record?.greatNum}</Descriptions.Item>
              <Descriptions.Item label="粉丝">{record?.fansNum}</Descriptions.Item>
              <Descriptions.Item label="关注">{record?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="收藏">{record?.focusResourcesNum}</Descriptions.Item>
              <Descriptions.Item label="资源下载数">{record?.resourcesDownloadNum}</Descriptions.Item>
              <Descriptions.Item label="课程订阅数">{record?.courseSubscribeNum}</Descriptions.Item>
              <Descriptions.Item label="推荐资源数">{record?.resourcesRecommendNum}</Descriptions.Item>
              <Descriptions.Item label="推荐作品数">{record?.worksRecommendNum}</Descriptions.Item>
              <Descriptions.Item label="推荐文章数">{record?.articleRecommendNum}</Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default WorkDetail;
